<script>
import { ref, onMounted, toRefs, reactive } from "vue";
import { useDraw, useClearDraw, useBackLastDraw } from "@/hooks/darw-hook";

export default {
  name: "draw",
  setup() {
    const canvas = ref(null);
    const c_width = ref(window.innerWidth - 25);
    const c_height = ref(500);
    const color = ref("black");

    let ctx = null;

    const D = reactive({
      position: [],
      ctx: null,
      canvas: null,
    });

    onMounted(() => {
      D.canvas = canvas;
      useDraw(D, canvas.value, { color: color.value });
    });

    let cleanDraw = () => {
      useClearDraw(D, D.canvas);
    };
    let backLastDraw = () => {
      useBackLastDraw(D, D.canvas);
    };

    const changeColor = () => {
      useDraw(D, canvas.value, { color: color.value });
      console.log(color);
    };

    return {
      canvas,
      c_width,
      c_height,
      cleanDraw,
      backLastDraw,
      changeColor,
      color,
    };
  },
};
</script>

<template>
  <div class="draw">
    <div class="title" style="margin: 10px 0 10px 10px">
      <van-tag color="#7232dd" plain size="large"> 绘图区域 </van-tag>
    </div>
    <div style="margin: 10px 0 10px 0">
      &nbsp;&nbsp;选择颜色：
      <input type="color" @change="changeColor" v-model="color" />
    </div>
    <div
      style="
        padding: 0 10px 10px 10px;
        box-sizing: border-box;
        width: 100vw;
        height: 300px;
      "
      class="paint_area"
    >
      <canvas
        ref="canvas"
        id="draw"
        :width="c_width"
        :height="c_height"
        style="margin-top: 5px; border: 2px solid #08f"
      ></canvas>
      <br />
      <van-button type="primary " @click="cleanDraw"> 清空画布 </van-button>
      &nbsp;&nbsp;
      <van-button
        type="primary "
        @click="backLastDraw"
        style="margin-bottom: 20px"
      >
        清空后回到上次绘制或重绘本次
      </van-button>
    </div>
  </div>
</template>

<style scoped></style>
